<template>
    <div class="main_container">
        <Modal v-model="active" title="创建漏洞" @on-ok="handleSubmit" draggable>
            <Form v-model="newData" :label-width="100" :label-colon="true">
                <FormItem label="扫描任务名称">
                    <Input v-model="newData.scanName" />
                </FormItem>
                <FormItem label="关联任务">
                    <Select v-model="newData.myTaskId">
                        <Option v-for="(value, key) in IdNameMap" :value="key" :key="key">{{ value }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="目标Ip">
                    <Input v-model="newData.scanTarget" />
                </FormItem>
                <FormItem label="扫描策略">
                    <Input v-model="newData.scanPolicy" />
                </FormItem>
                <FormItem label="扫描工具">
                    <Input v-model="newData.scanTools" />
                </FormItem>
                <FormItem label="危险等级">
                    <Select v-model="newData.riskLevel">
                        <Option v-for="(value, key) in riskLevelStr" :value="key" :key="key">{{ value }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="发现的漏洞">
                    <Input v-model="newData.foundVul" />
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="4" offset="20" class-name="button_container">
            <Button type="success" shape="circle" size="large" @click="handleCreate">新建漏洞扫描</Button>
            </Col>
        </Row>
        <div class="list_container">
            <Collapse v-model="value">
                <Panel v-for="(scanList, key) in scanData" :name="key">
                    {{ IdNameMap[key] }}
                    <template #content>
                        <div v-for="scan in scanList">
                            <Row class-name="show_div" wrap>
                                <Col span="6" class-name="col_div">
                                扫描任务名称：{{ scan.scanName }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                测试员：{{ username }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                目标Ip：{{ scan.scanTarget }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                扫描策略：{{ scan.scanPolicy }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                扫描工具：{{ scan.scanTools }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                危险等级：{{ riskLevelStr[scan.riskLevel] }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6" class-name="col_div">
                                发现的漏洞：{{ scan.foundVul }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="9" class-name="col_div">
                                开始扫描的时间：{{ scan.scanTime }}
                                </Col>
                            </Row>
                            <Divider v-show="scan != scanList[scanList.length - 1]" />
                        </div>
                    </template>
                </Panel>
            </Collapse>
        </div>
    </div>
</template>
<script>

export default {
    name: "Exploit",
    data() {
        return {
            scanData: {},
            value: null,
            newData: {},
            active: false,
            IdNameMap: {},//存储该用户mytaskid与任务之间的映射
            riskLevelStr: {
                0: "无危害",
                1: "低危",
                2: "中危",
                3: "高危",
            },
            username: "",
        };
    },
    methods: {
        renew() {
            this.$api.get("tester/scan/list").then((res) => {
                var listData = res.data.data;
                var result = {};
                for (var k in this.IdNameMap) result[k] = [];//设置空队列
                for (var i in listData) result[listData[i].myTaskId].push(listData[i]);
                console.log(result);
                this.scanData = result;
            })
        },
        handleCreate() {
            this.active = true;
            this.newData = {};
        },
        handleSubmit() {
            console.log(this.newData);
            this.newData.scanTime = new Date();
            console.log(this.newData);
            this.$api.post("tester/scan/create", this.newData).then((res) => {
                this.$Notice.info({
                    title: "提示",
                    desc: res.msg,
                });
                this.renew();
            })
        }
    },
    created() {
        this.username = sessionStorage.getItem("username");
        this.$api.get("tester/task/map").then((res) => {
            this.IdNameMap = res.data.data;//获取键值对
            this.value = [];
            for (var i in this.IdNameMap) this.value.push(i);
            this.renew();
        });
    },
}
</script>
<style scoped>
.main_container {
    width: 90%;
    height: 98%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.list_container {
    height: 500px;
    overflow: auto;
}

.button_container {
    padding: 15px 5px;
}

.show_div {
    width: auto;
    padding: 10px;
    border: solid;
    border-radius: 20px;
    /* font-size: normal; */
}

.col_div {
    height: 40px;
    padding: 10px;
}
</style>